:root {
  --rmdp-primary-green: #3d9970;
  --rmdp-primary-purple: #9c27b0;
  --rmdp-primary-purple: #9c27b0;
  --rmdp-primary-teal: #009688;
  --rmdp-primary-yellow: #f7da37;
  --rmdp-primary-red: #ea0034;
}

.rmdp-header-plugin {
  background-color: #0074d9;
  display: grid;
  color: white;
}

.rmdp-header-plugin div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rmdp-header-plugin .rmdp-hp-dd {
  font-size: 50px;
  font-weight: 500;
}

.rmdp-header-plugin.small.top .rmdp-hp-dd,
.rmdp-header-plugin.small.bottom .rmdp-hp-dd {
  font-size: 28px;
}

.rmdp-header-plugin.top {
  border-radius: 5px 5px 0 0;
}

.rmdp-header-plugin.bottom {
  border-radius: 0 0 5px 5px;
}

.rmdp-header-plugin.left {
  border-radius: 5px 0 0 5px;
}

.rmdp-header-plugin.right {
  border-radius: 0 5px 5px 0;
}

.rmdp-header-plugin.top.big,
.rmdp-header-plugin.bottom.big {
  height: 200px;
}

.rmdp-header-plugin.left.big,
.rmdp-header-plugin.right.big {
  width: 225px;
}

.rmdp-header-plugin.top.medium,
.rmdp-header-plugin.bottom.medium {
  height: 150px;
}

.rmdp-header-plugin.left.medium,
.rmdp-header-plugin.right.medium {
  width: 150px;
}

.rmdp-header-plugin.top.small,
.rmdp-header-plugin.bottom.small {
  height: 90px;
}

.rmdp-header-plugin.left.small,
.rmdp-header-plugin.right.small {
  width: 110px;
}

.green .rmdp-header-plugin {
  background-color: var(--rmdp-primary-green);
}

.purple .rmdp-header-plugin {
  background-color: var(--rmdp-primary-purple);
}

.red .rmdp-header-plugin {
  background-color: var(--rmdp-primary-red);
}

.teal .rmdp-header-plugin {
  background-color: var(--rmdp-primary-teal);
}

.yellow .rmdp-header-plugin {
  background-color: var(--rmdp-primary-yellow);
}

.rmdp-header-plugin.no-border-top-left-radius {
  border-top-left-radius: 0;
}

.rmdp-header-plugin.no-border-bottom-left-radius {
  border-bottom-left-radius: 0;
}

.rmdp-header-plugin.no-border-top-right-radius {
  border-top-right-radius: 0;
}

.rmdp-header-plugin.no-border-bottom-right-radius {
  border-bottom-right-radius: 0;
}

.rmdp-header-plugin.no-border-radius {
  border-radius: 0;
}

@media (max-width: 400px), (max-height: 400px) {
  .rmdp-header-plugin.top.big,
  .rmdp-header-plugin.bottom.big {
    height: 100px;
  }

  .rmdp-header-plugin.left.big,
  .rmdp-header-plugin.right.big {
    width: 125px;
  }

  .rmdp-header-plugin.top.medium,
  .rmdp-header-plugin.bottom.medium {
    height: 75px;
  }

  .rmdp-header-plugin.left.medium,
  .rmdp-header-plugin.right.medium {
    width: 75px;
  }

  .rmdp-header-plugin.top.small,
  .rmdp-header-plugin.bottom.small {
    height: 55px;
  }

  .rmdp-header-plugin.left.small,
  .rmdp-header-plugin.right.small {
    width: 55px;
  }

  .rmdp-header-plugin.big.top .rmdp-hp-dd,
  .rmdp-header-plugin.big.bottom .rmdp-hp-dd,
  .rmdp-header-plugin.small.left .rmdp-hp-dd,
  .rmdp-header-plugin.small.right .rmdp-hp-dd {
    font-size: 30px;
  }

  .rmdp-header-plugin.medium.top .rmdp-hp-dd,
  .rmdp-header-plugin.medium.bottom .rmdp-hp-dd {
    font-size: 20px;
  }

  .rmdp-header-plugin.medium.top .rmdp-hp-dddd,
  .rmdp-header-plugin.medium.bottom .rmdp-hp-dddd,
  .rmdp-header-plugin.medium.top .rmdp-hp-my,
  .rmdp-header-plugin.medium.bottom .rmdp-hp-my {
    font-size: 14px;
  }

  .rmdp-header-plugin.small.top .rmdp-hp-dd,
  .rmdp-header-plugin.small.bottom .rmdp-hp-dd {
    font-size: 18px;
  }

  .rmdp-header-plugin.small .rmdp-hp-dddd,
  .rmdp-header-plugin.small .rmdp-hp-my {
    font-size: 12px;
  }
}
